<template>
	<view>
		<view style="padding-left: 43upx;padding-top: 22upx; text-align: center; background-color:#11CC99;height: 300upx;">
			<span style="font-size: 42upx;font-weight: 600;">{{title}}</span>
		</view>
		<view class="vmodul" style="margin-top: -180upx;">
			<view>
				<view class="cu-form-group" style="font-size: 46upx;font-weight: 550;">
					<span>任务单类型：</span>
					
					<text v-if="data.taskType==='xunjian'">巡检</text>
					<text v-if="data.taskType==='bidui'">比对</text>
					<text v-if="data.taskType==='weixiu'">维修</text>
					<text v-if="data.taskType==='qita'">其它</text>
				</view>
				<view class="cu-form-group">
					<view>实施人:</view>
					<text>{{data.shishirenName}}</text>
				</view>
				<view class="cu-form-group">
					<view>开始时间:</view>
					<text>{{data.createTime}}</text>
				</view>
				<view class="cu-form-group">
					<view>站点名称:</view>
					<text>{{data.siteName}}</text>
				</view>
				<view class="cu-form-group">
					<view style="white-space:nowrap;">详情:</view>
					<text>{{data.yunweiContent}}</text>
				</view>
				<view class="cu-form-group">
					<view>备注:</view>
					<text>{{data.yunweiBeizhu}}</text>
				</view>
				<view class="cu-form-group">
					<view>相关内容:</view>
					<text>{{data.siteName}}</text>
				</view>
				<view class="cu-form-group">
					<view class="flex-item-20">图片</view>
					<view class="flex-item-80">
						<image :src="data.tempPicture" @tap="_previewImage(data.tempPicture)" class="img" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="padding flex flex-direction">
				<button @click="passClick" class="cu-btn bg-grey lg">接受</button>
				<button @click="unPassClick" class="cu-btn bg-red margin-tb-sm lg">关闭</button>
			</view>
			<!-- <view style="padding-top: 43upx;padding-bottom: 43upx;">
				<button @click="sureSubmit" style="background-color:#11CC99;height: 80upx;width: 80%;"><span>提交申请</span></button>
			</view> -->
		</view>
	</view>
</template>

<script>
	import sunUiUpimg from '@/components/sunui-upimg/sunui-upimg.vue';
	import Util from '@/utils/util.js';
	let self
	export default{
		data(){
			return{
				title:'运维信息',
				taskType:'',
				pictureUrl:'',
				reason:'',
				data:{},
				// showMessage1:false,
				// showMessage2:false,
				// showMessage3:true,
				// showMessage4:true,
				serviceArr4: [],
				historyOpInfo:[],
				xunjianInfo:{
					reason:'',
				},
				biduiInfo:{
					reason:'',
				},
				qitaInfo:{
					reason:'',
				},
				weixiuInfo:{
					reason:'',
				},
			}
		},
		components: {
			'sunui-upimg': sunUiUpimg
		},
		onLoad(e) {
			self = this
			//依据任务单类型渲染界面（目前表一样，考虑后期不同类型表单会不一样）
			if(e.type){
				self.taskType = e.type
			}
			
			//根据任务单id查询相关信息
			if(e.id){
				Util.request('/monitor/taskInfo/get', {id:e.id}, 'GET').then(res=>{
					if(res.data.tempPicture){
						let pictureArr = res.data.tempPicture.split('upload')
						pictureArr = pictureArr[1].split('\\')
						res.data.tempPicture = "http://www.szsjml.top:8148/image/"+pictureArr[1]+"/"+pictureArr[2];
					}
					self.data=res.data; //任务单数据
					if(self.data.opStatus ==='operating'&&self.data.oaStatus ==='back'){
						//加载历史处理单
						if(self.taskType === 'xunjian'){
							//查询运维单
							Util.request('/monitor/taskXunjian/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
								res.data.map(item => {
									if(item.pictureArr){
									item.pictureArr.map(picture =>{
										if(picture.filePath){
											let pictureTemp = picture.filePath.split('upload')
											pictureTemp = pictureTemp[1].split('\\')
											picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
										}
									})
									}
								});
								self.historyOpInfo=res.data; //任务单数据
							}).catch(()=>{
								//联网失败, 结束加载
							})
						}else if(self.taskType === 'bidui'){
							//查询运维单
							Util.request('/monitor/taskBidui/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
								res.data.map(item => {
									if(item.pictureArr){
									item.pictureArr.map(picture =>{
										if(picture.filePath){
											let pictureTemp = picture.filePath.split('upload')
											pictureTemp = pictureTemp[1].split('\\')
											picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
										}
									})
									}
								});
								self.historyOpInfo=res.data; //任务单数据
							}).catch(()=>{
								//联网失败, 结束加载
							})
						}else if(self.taskType === 'weixiu'){
							//查询运维单
							Util.request('/monitor/taskGuzhang/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
								res.data.map(item => {
									if(item.pictureArr){
									item.pictureArr.map(picture =>{
										if(picture.filePath){
											let pictureTemp = picture.filePath.split('upload')
											pictureTemp = pictureTemp[1].split('\\')
											picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
										}
									})
									}
								});
								self.historyOpInfo=res.data; //任务单数据
							}).catch(()=>{
								//联网失败, 结束加载
							})
						}else if(self.taskType === 'qita'){
							//查询运维单
							Util.request('/monitor/taskQita/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
								res.data.map(item => {
									if(item.pictureArr){
									item.pictureArr.map(picture =>{
										if(picture.filePath){
											let pictureTemp = picture.filePath.split('upload')
											pictureTemp = pictureTemp[1].split('\\')
											picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
										}
									})
									}
								});
								self.historyOpInfo=res.data; //任务单数据
							}).catch(()=>{
								//联网失败, 结束加载
							})
						}
					}
				}).catch(()=>{
					//联网失败, 结束加载
				})

			}
		},
		mounted() {
					// this.$refs.upimg.upload_before_list = this.serviceArr4;
		},
		methods:{
			_previewImage(image) {
							var imgArr = [];
							imgArr.push(image);
							//预览图片
							uni.previewImage({
								urls: imgArr,
								current: imgArr[0]
							});
						},
			passClick() {
				self.data.opStatus = 'operating'
				self.$delete(self.data,'shenherenId')
				//更新任务状态为运维中
				Util.request('/monitor/taskInfo/update', self.data, 'POST').then((res) => {
					uni.showModal({
						title: '提示',
						content: '任务进入待完成列表',
						showCancel: false,
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								uni.navigateBack({
									delta:1
								})
							}
						}
					})
					
				})
			},
			unPassClick() {
				self.data.opStatus = 'back'
				self.$delete(self.data,'shenherenId')
				//
				//更新任务状态为退回back
				Util.request('/monitor/taskInfo/update', self.data, 'POST').then((res) => {
					uni.showModal({
						title: '提示',
						content: '回退成功',
						showCancel: false,
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								uni.navigateBack({
									delta:1
								})
							}
						}
					})
					
				})
			},
			getImageInfo(e) {
				if(e.length>0){
					
				}
			},
		}
	}
</script>

<style>
	.vmodul{
		display: flex;
		flex-direction:column;
		margin-left: 22upx;
		margin-right: 22upx;
		margin-top: 22upx;
		background-color: #FCFCFC;
		padding: 10upx 10upx 10upx 10upx;
		border-radius:22upx
	}
	.reason{
		padding: .4rem .5rem;
	}
	.cuIcon-order::before{
		color: white;
		border-radius: 50%;
		background-color: #53C8E7;
		margin-right: 20upx;
	}
	.cuIcon-moneybagfill::before{
		color: #F2D67A;
		margin-right: 20upx;
	}
	.cuIcon-timefill::before{
		color: #8BB2F3;
		margin-right: 20upx;
	}
	.after-cuIcon-fold::after {
		content: "\e6de";
		color:#008800;
		font-weight: 200;
		font-size: 40upx;
	}
	.after-cuIcon-unfold::after {
		content: "\e661";
		color:#008800;
		font-weight: 200;
		font-size: 40upx;
	}
	.row{
		margin-left: 20upx;
		margin-right: 34upx;
		font-family: "cuIcon";
	}
	.img {
	  border-radius: 29.22rpx;
	  width: 200.65rpx;
	  height: 200.65rpx;
	  overflow: hidden;
	}
</style>
